<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>视频</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <link rel="stylesheet" type="text/css" href="./css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(255, 255, 255, 1);
        }

        .video {
            position: relative;
            height: 218px;
        }

        .play {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 50px;
            height: 50px;
        }

        .row {
            margin: 15px;
        }

        .line {
            margin: 15px;
            height: 1px;
            background: rgb(214, 214, 214);
            transform: scaleY(0.5);
        }

        .video-title {
            height: fit-content;
            font-size: 18px;
            font-weight: bold;
            color: rgba(34, 34, 36, 1);
            line-height: 27px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .rmb {
            font-size: 13px;
            font-weight: 500;
            color: rgba(255, 92, 1, 1);
            padding-top: 5px;
            margin-right: 5px;
        }

        .number {
            font-size: 20px;
            font-weight: 600;
            color: rgba(255, 92, 1, 1);
            margin-right: 9px;
        }

        .tips {
            font-size: 13px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .head .key {
            font-size: 15px;
            font-weight: bold;
            color: rgba(25, 25, 25, 1);
        }

        .head .value {
            font-size: 15px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .episodes {
            flex-wrap: nowrap;
            overflow-x: scroll !important;
            height: 55px;
            line-height: 55px;
            text-align: center;
        }

        .episodes-item {
            position: relative;
            width: 55px;
            height: 55px;
            min-width: 55px;
            background: rgba(245, 245, 245, 1);
            border-radius: 5px;
            margin-right: 10px;
        }

        .episodes .index {
            font-size: 18px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .episodes .active {
            font-weight: 500;
            color: rgba(90, 194, 255, 1);
        }

        .episodes .money {
            position: absolute;
            right: 0;
            top: 0;
            max-width: 55px;
            padding: 0 3px;
            background: rgba(255, 170, 94, 1);
            border-radius: 5px;
            height: 14px;
            line-height: 16px;
            font-size: 10px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .description {
            margin-top: 10px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            line-height: 22px;
        }

        .bottom-occupy {
            height: 50px;
        }

        .bottom {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 0px 0px rgba(212, 212, 212, 1);
            padding: 0 10px 0 20px;
            box-sizing: border-box;
        }

        .bottom::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: rgba(212, 212, 212, 1);
            transform: scaleY(0.5);
        }

        .bottom .item {
            width: 24px;
            margin-right: 25px;
            font-size: 10px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 14px;
            padding-bottom: 3px;
        }

        .bottom .item img {
            width: 24px;
            height: 24px;
        }

        .btn {
            width: 112px;
            height: 32px;
            font-size: 15px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 15px;
            border-radius: 18px;
            margin: 0 5px;
        }

        .blue {
            background: rgba(90, 194, 255, 1);
        }

        .yellow {
            background: rgba(253, 155, 67, 1);
        }

        video {
            display: block;
            width: 100%;
            height: 218px;
        }

        .footer {
            z-index: 10;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
        }

        .footer img {
            width: 30px;
            height: 30px;
            margin: 0 15px;
        }

        .footer .time {
            min-width: fit-content;
            max-width: fit-content;
            color: #fff;
            font-size: 12px;
            margin-left: 13px;
        }

        .footer .full {
            width: 40px;
            height: 40px;
            margin: 0 8px;
        }

        .progress-box {
            position: relative;
            height: 4px;
            background: rgba(0, 0, 0, 0.48);
            border-radius: 2px;
            overflow: initial;
        }

        .progress {
            background-color: #fff;
            border-radius: 2px;
            width: 0%;
            height: 4px;
        }

        .point {
            position: absolute;
            top: 2px;
            left: 0%;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.35);
            box-sizing: content-box;
            transform: translate(-50%, -50%);
        }

        .point::before {
            content: ' ';
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #fff;
        }

        .active {
            font-size: 18px;
            font-weight: 500;
            color: rgba(90, 194, 255, 1);
        }

        .comment {
            display: flex;
        }

        .comment img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .comment .avatar {
            overflow: hidden;
            width: 33px;
            height: 33px;
            min-width: 33px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .comment .full {
            flex-grow: 1;
            border-bottom: 1px solid #E7E6E6;
        }

        .comment .justify {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 33px;
            margin-bottom: 10px;
        }

        .comment .justify .start {
            font-size: 14px;
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
        }

        .comment .justify .end {
            font-size: 12px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .comment .content {
            margin-bottom: 10px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(74, 75, 77, 1);
            line-height: 23px;
        }

        .comment .reply {
            padding: 10px;
            margin-bottom: 10px;
            background: rgba(238, 238, 238, 1);
            border-radius: 4px;
        }

        .comment .reply .head {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .comment .reply .head .avatar {
            min-width: 20px;
            max-width: 20px;
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        .comment .reply .head .name {
            font-size: 12px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .comment .reply .content {
            margin-bottom: 0;
            font-size: 12px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            line-height: 17px;
        }

        .comments-tips {
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .video-tips {
            z-index: 999;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .cover {
            z-index: 989;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: transparent;
        }

        .gratis {
            font-size: 18px;
            font-weight: 500;
            color: rgba(255, 92, 1, 1);
        }

        .download {
            position: fixed;
            left: 15px;
            bottom: 30px;
            right: 15px;
            height: 40px;
            background: rgba(90, 194, 255, 1);
            font-size: 14px;
            font-weight: 500;
            border-radius: 25px;
            color: rgba(255, 255, 255, 1);
            box-shadow: 0px 5px 7px 0px rgba(11, 126, 193, 0.53);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="video">
            <video id="video" preload="meta" x5-playsinline="" playsinline="" webkit-playsinline=""
                :src="video.videoUrl" :poster="video.pic || video.videoUrl + '?x-oss-process=video/snapshot,t_100,m_fast'" @click="isShow = !isShow">
                <source :src="video.videoUrl" type="video/mp4" />
                <source :src="video.videoUrl" type="video/ogg" />
                <source :src="video.videoUrl" type="video/webm" />
            </video>
            <img class="play" @click="isPlay = true" @click.once="saveTrackInfo" v-show="isPlay === false && isEnd === false"
                src="./img/play.png" alt="">
            <div class="footer" v-show="isShow" data-flex="box:justify cross:center">
                <img @click="isPlay = !isPlay" :src="isPlay ? './img/pause.png' : './img/play_4.png'"
                    alt="">
                <div class="progress-box" data-flex-box="1">
                    <div :style="'width:'+ (currentTime/duration*100) +'%'" class="progress"></div>
                    <div :style="'left:'+ (currentTime/duration*100) +'%'" class="point" id="point"></div>
                </div>
                <div class="time">{{ current }}/{{ durations }}</div>
                <!-- <img class="full" src="../../image/ui/full.png" alt="" @click="rotateX"> -->
            </div>
            <div class="video-tips" v-show="isEnd" data-flex="main:center cross:center">
                您的试看已结束,请在下方进行购买
            </div>
            <div class="cover" v-show="isEnd"></div>
        </div>
        <div class="row">
            <div class="video-title">{{ video.name }}</div>
        </div>
        <!-- <div v-if="videos.point == 2 && videos.active == 1" class="row">
            <div class="tips">已购买</div>
        </div> -->
        <div v-if="videos.point == 2" class="row" data-flex="cross:center">
            <div class="rmb">¥</div>
            <div class="number">{{ isApplePay ? videos.productPrice : videos.price }}</div>
            <div class="tips">全集购买</div>
        </div>
        <div v-else-if="videos.point == 1" class="row">
            <div class="gratis">免费</div>
        </div>
        <div v-else-if="videos.point == 0" class="row" data-flex="cross:center">
            <div class="number">{{ videos.pricePoint }}</div>
            <div class="tips">积分购买</div>
        </div>
        <div class="line"></div>
        <div class="row">
            <div class="head" data-flex="main:justify cross:center">
                <div class="key">选集</div>
                <div class="value">{{ videos.videos.length }}集全</div>
            </div>
        </div>
        <div class="row">
            <div class="episodes" data-flex="cross:center">
                <div v-for="item,index in videos.videos" class="episodes-item">
                    <div class="index" :class="{'active': currentPlay === index}" @click="currentPlay = index">
                        {{ index + 1 }}
                    </div>
                    <div class="money">¥{{ isApplePay ? item.productPrice : item.price }}</div>
                </div>
            </div>
        </div>
        <div class="line"></div>
        <div class="row">
            <div class="head" data-flex="main:justify">
                <div class="key">视频介绍</div>
            </div>
        </div>
        <div class="row">
            <div class="description" v-html="video.detailMobileHtml"></div>
        </div>
        <div class="download" data-flex="main:center cross:center" @click="downloadApp()">
            下载朗文英语世界
        </div>
        <!-- <div class="row">
            <div class="head" data-flex="main:justify">
                <div class="key">视频留言</div>
            </div>
        </div>
        <div class="row" v-if="comments.length < 1">
            <div class="comments-tips">
                当前视频暂时没有评论
            </div>
        </div>
        <div class="row" v-for="item,index in comments">
            <div class="comment">
                <div class="avatar">
                    <img :src="item.icon" alt="">
                </div>
                <div class="full">
                    <div class="justify">
                        <div class="start">{{ item.nickName }}</div>
                        <div class="end" v-if="item.status == 1" @click="deleteCommment(index)">删除</div>
                    </div>
                    <div class="content">
                        {{ item.content }}
                    </div>
                    <div class="reply" v-if="item.sysUserId !== ''">
                        <div class="head">
                            <div class="avatar">
                                <img :src="item.photo" alt="">
                            </div>
                            <div class="name">
                                {{ item.loginName }}
                            </div>
                        </div>
                        <div class="content">
                            {{ item.backContent }}
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
        <!-- <footer class="bottom-occupy"></footer>
        <footer class="bottom" v-if='isShowFooter'  data-flex="cross:center">
            <div class="item" @click="fav">
                <img :src="isFav ? '../../image/ui/collect_4.png' : '../../image/ui/collect_3.png'" alt="">
                收藏
            </div>
            <div class="item" @click="advisory()">
                <img src="../../image/ui/consult.png" alt="">
                评论
            </div>
            <div class="btns" data-flex="main:justify" data-flex-box="1">
                <div class="btn blue" v-if="videos.point == 2 && videos.active != 1" data-flex="main:center cross:center" data-flex-box="1" @click="buy(1)">
                    购买全集
                </div>
                <div class="btn yellow" v-if="videos.point == 2 && video.active != 1" data-flex="main:center cross:center" data-flex-box="1"
                    @click="buy(2)">
                    购买本集
                </div>
                <div class="btn yellow" v-if="videos.point == 1" data-flex="main:center cross:center"
                    data-flex-box="1">
                    免费观看
                </div>
                <div class="btn blue" v-if="videos.point == 0 && videos.active != 1" data-flex="main:center cross:center" data-flex-box="1" @click="buy(1)">
                    积分兑换全集
                </div>
                <div class="btn yellow" v-if="videos.point == 0 && video.active != 1" data-flex="main:center cross:center" data-flex-box="1" @click="buy(2)">
                    积分兑换本集
                </div>
                <div class="btn blue" v-if="videos.active == 1" data-flex="main:center cross:center" data-flex-box="1">
                    已购买
                </div>
                <div class="btn yellow" v-if="videos.active != 1 && video.active == 1" data-flex="main:center cross:center" data-flex-box="1">
                    已购买
                </div>
            </div>
        </footer> -->
    </div>
</body>
<!-- <script type="text/javascript" src="../../script/api.js"></script> -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/service-tool.js"></script>
<script type="text/javascript" src="./js/service-app.js"></script>
<script type="text/javascript" src="./js/service-user.js"></script>
<script type="text/javascript" src="./js/service-logic.js"></script>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam, video;
    // apiready = function () {
    //     $S = SERVICE();
    //     USER = USER();
    //     pageParam = api.pageParam;
    //     console.log(JSON.stringify(api.pageParam) + '=====pageParam');
    //     // 监听到评论后重新请求api
    //     api.addEventListener({
    //         name: 'commentLoad'
    //     }, function (ret) {
    //         findComment('headerRefreshing');
    //     });
    //     fnInit();
    // };
    // $S = SERVICE();
    // USER = USER();

    fnInit();
    
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                isApplePay: false, // 是否苹果支付
                // 套集
                videos: {
                    videos: []
                },
                // 视频
                video: {},
                // 当前播放的索引,默认为 0
                currentPlay: 0,
                // 评论
                comments: [],
                // 是否播放, 默认为否
                isPlay: false,
                // 当前播放进度
                currentTime: 0,
                // 视频总时长
                duration: 0,
                // 是否显示控制台, 默认为否
                isShow: false,
                // 试看是否结束
                isEnd: false,
                // 该套集是否已收藏,默认为否
                isFav: false,
                // 是否显示底部, 用来判断数据是否请求完成, 不然会闪动
                isShowFooter: false,
                // 评论分页
                pageNo: 1,
                pageSize: 10
            },
            watch: {
                isPlay: function () {
                    if(this.isPlay) {
                        video.play();
                    } else {
                        video.pause();
                    }
                    // downloadApp();
                },
                currentPlay: function () {
                    this.isPlay = false;
                    this.isEnd = false;
                    findVideoByProduct();
                },
                currentTime: function () {
                    if (this.video.active != 1 && this.currentTime >= this.video.tryLengthTime) {
                        this.isEnd = true;
                        this.isPlay = false;
                        this.isShow = true;
                    }
                }
            },
            computed: {
                current: function () {
                    var time = parseInt(this.currentTime);
                    var s = time % 60,
                        m = (time - s) / 60;
                    return (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
                },
                durations: function () {
                    var time = parseInt(this.duration);
                    var s = time % 60,
                        m = (time - s) / 60;
                    return (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
                }
            }
        });
        findVideosByProducts();
        videoListener();
    }

    // 获取当前套集的数据
    function findVideosByProducts() {
        var params = {
            'productsId': getQuery('id')
        };
        var url = 'videos/findVideosByProducts';
        var callback = function (data) {     
            vm.videos = data;
            vm.isFav = data.fav === 1;
            vm.$nextTick(function () {
                findVideoByProduct();
                vm.isShowFooter = true;
            });
        };
        POST(url, params, callback);
    }

    // 根据当前播放的索引获取视频的数据
    function findVideoByProduct() {
        if(vm.videos.videos.length < 1) {
            return;
        }
        var params = {
            'videoProductId': vm.videos.videos[vm.currentPlay].id
        };
        var url = 'videos/findVideoByProduct';
        var callback = function (data) {
            if(vm.videos.active == 1) {
                data.active = '1';
            }; 
            vm.video = data;
            vm.$nextTick(function () {
                if(vm.video.videoUrl == '') {
                    return;
                    fnToast('当前这集没有视频');
                } else {
                    videoListener();
                }
                loadComment();
            });
        };
        POST(url, params, callback);
    }
    
    function loadComment() {
        findComment('headerRefreshing');
        // fnAddHeaderRefreshingEvent(function() { //设置下拉刷新
        //     findComment('headerRefreshing');
        // });

        // fnAddFooterLoadingEvent(function() { // 设置上拉加载
        //     findComment('load');
        // });
    }

    // 获取到视频的数据之后, 获取视频的评论
    function findComment(sign) {
        if(sign == 'headerRefreshing') {
            vm.pageNo = 1;
        } else {
            vm.pageNo ++;
        }
        var params = {
            'busnissTypeCode': '1',
            'busnissId': vm.video.id,
            'pageNo': vm.pageNo,
            'pageSize': vm.pageSize
        };
        var url = 'comment/findComment';
        var callback = function (data) {
            if(vm.pageNo == '1') {
                vm.comments = [];
            };
            api.refreshHeaderLoadDone();
            vm.comments = vm.comments.concat(data.listData);
        };
        POST(url, params, callback);
    }

    // 删除评论
    function deleteCommment(index) {
        fnOpenAlert({
            alertType: '11',
            alertConfirmFn: 'confirmDelete(' + index + ');'
        })
    }

    // 确认删除
    function confirmDelete(index) {
        var params = {
            'entityName': 'commentRecord',
            'id': vm.comments[index].id
        };
        var url = 'common/deleteById';
        var callback = function (data) {
            vm.comments.splice(index, 1);
            fnToast('删除成功');
        };
        POST(url, params, callback);
    }

    // 获取到视频的数据之后, 注入事件监听
    function videoListener() {
        video = document.getElementById('video');
        video.addEventListener('durationchange', function () {
            vm.duration = this.duration;
        })
        video.addEventListener('timeupdate', function () {
            vm.currentTime = this.currentTime;
        });
        video.addEventListener("ended", function () {
            vm.isPlay = false;
        });
    }

    // 打开分享页面
    function headerFn() {
        fnOpenFrame({
            name: 'share_frm',
            url: '../share.html',
            pageParam: {
                businessId: pageParam.productsId
            }
        });
    }

    // 评论
    function advisory() {
        fnOpenComment(vm.video.id, '1');
    }

    // 横屏
    function rotateX() {
        fnOpenWin({
            name: 'video_horizontal',
            url: './video_horizontal.html',
            pageParam: {
                currentTime: vm.currentTime,
                video: vm.video,
                isPlay: vm.isPlay,
                winName: api.winName,
                frmName: api.frameName
            },
            slidBackEnabled: false
        });
        api.setScreenOrientation({
            orientation: 'landscape_left'
        });
        // 不加该代码视频会有BUG
        vm.isPlay = false;
    }

    // 继续播放
    function resumePlay(time, isPlay) {
        video.currentTime = time;
        vm.isPlay = isPlay;
    }

    // 将套集保存到历史记录
    function saveTrackInfo() {
        return;
        var params = {
            'trackTypeCode': '02',
            'bussTableId': pageParam.productsId
        };
        var url = 'apiTrack/saveTrackInfo';
        $S.POST(url, params, function (ret) {});
    }

    // 收藏
    function fav() {
        if (vm.isFav) {
            var params = {
                'id': vm.videos.favId,
                'entityName': 'favoriteInfo'
            };
            var url = 'common/deleteById';
            var callback = function (data) {
                fnToast('取消收藏成功');
                vm.isFav = false;
            };
            POST(url, params, callback);
        } else {
            var params = {
                'bussTableId': pageParam.productsId,
                'favoriteTypeCode': '02'
            };
            var url = 'apiFavorite/saveFavoriteInfo';
            var callback = function (data) {
                fnToast('收藏成功');
                vm.videos.favId = data.favId;
                vm.isFav = true;
            };
            POST(url, params, callback);
        }
    }

    // 购买
    var isBuyAll = true;
    function buy(arg) {
        var params = {
            'productsId': pageParam.productsId,
            'isSaveIosPrice': vm.isApplePay ? 1 : 2
        };
        var url = 'videos/orderProducts';
        isBuyAll = true;
        if(arg == 2) {
            // 购买单集
            url = 'videos/orderVideo';
            params.videoProductId = vm.video.id;
            isBuyAll = false;
        }
        var callback = function (data) {
            var payMethod = 0;
            fnOpenPublicWin('支付详情', 'video/pay',{
                retData: data,
                from: 2,
                refreshWin: api.winName,
                refreshFrm: api.frameName,
                payMethod: vm.videos.point == 0 ? -1 : 0 // -1 积分购买,其他值无意义
            });
        };
        POST(url, params, callback);
    }

    // 支付成功后的回调
    function paySuccessCallback() {
        if(isBuyAll) {
            // 购买全集成功回调
            vm.videos.active = 1;
            vm.video.active = 1;
        }else {
            // 购买单集成功回调
            vm.video.active = 1;
        }
    }
</script>

</html>